<template lang="pug">
  .page
    .AccountsReceivableManage
      //- .search-form.mb-10.pl-10.pr-10
      //-   Form.ivu-row(ref="formData" :model="formData" :rules="rules" :label-width="90")
      //-     FormItem.form-item.ivu-col.pr-20.mb-15(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
      //-       template(v-if="item.type === 'input'")
      //-         Input(v-model="formData[item.model]" :placeholder="item.placeholder")
      //-       template(v-if="item.type === 'interval'")
      //-         DatePicker.pull-left.interval(v-model="formData[item.model1]" :value="datePickerDefault" :placeholder="item.placeholder1" type="month" @on-change="handleChangeDatePicker")
      //-         span.pl-10.pr-10.pull-left.line-h-32 --
      //-         DatePicker.pull-left.interval(v-model="formData[item.model2]" :value="datePickerDefault" :placeholder="item.placeholder2" type="month" @on-change="handleChangeDatePicker")
      //-       template(v-if="item.type === 'button'")
      //-         Button(v-if="hasFind" type="info" @click="searchFn") 查询

      .pl-20.pr-20.bg-white
        Table.hasTitle-table.beautiful-table(:columns="thead" :data="tableData" :stripe="true" ref="demoTable"
          @on-selection-change="handleOnSelectChange"
        )
          .clearfix.pr-24.pl-12.overflow-hidden(slot="header")
            .table-title-lefttxt.pull-left
              |费用月份：
              span.text-info.pl-5.pr-5.font-weight {{$moment(feeDate).format('YYYY年MM月')}}
              Divider(type="vertical")
              |客户名称：
              span.text-info.pl-5.pr-5.font-weight {{companyName}}
            .pull-right.table-title-btns
              Button.mr-10(type="info" @click="handleExport") 导出
          .clearfix.pl-20.pr-20(slot="footer")
            Page(
              :total="tableComone.totalRows"
              @on-change="onChangePage"
              @on-page-size-change="onpageSizeChange"
              show-sizer
              show-total
              placement="top"
              prev-text="上一页"
              next-text="下一页"
              :page-size-opts="[10, 20, 30, 50, 100]"
            )
</template>

<script>
import { SalaryPayableBillApi } from "@/api/SalaryPayableBill.api.js"
import { SalaryDetailThead } from "./tableHead.js"
import _cloneDeep from "clone-deep"
import { EmployeesApi } from "@/api/Employees.api.js"

export default {
  name: "",

  components: {
  },

  data() {
    return {
      companyId: "", // 公司ID
      companyName: "", // 公司名称
      feeDate: "",
      thead: _cloneDeep(SalaryDetailThead),
      tableData: [],
      formData: {
        aaa: "",
        feeYearMonthStart: new Date(),
        feeYearMonthEnd: new Date()
      },
      // formItem: [
      //   { type: "input", label: "客户名称：", placeholder: "请输入客户名称", prop: "aaa", model: "aaa", style: "ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-8 ivu-col-span-xxl-6" },
      //   { type: "interval", label: "费用月份：", placeholder1: "开始日期", prop1: "feeYearMonthStart", model1: "feeYearMonthStart", placeholder2: "结束日期", prop2: "feeYearMonthEnd", model2: "feeYearMonthEnd", style: "ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-8 ivu-col-span-xxl-6" },
      //   { type: "button", style: "ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-8 ivu-col-span-xxl-6" }
      // ],
      // rules: {},
      selectedEmployeeId: [], // 勾选的id集合,array格式
      selectedEmployeeArr: [], // 勾选的id, name数组集合
      tableComone: {
        pageIndex: 1, // 页码
        totalRows: 0, // 总条数
        pageSize: 10, // 当前页面展示条数
        total: 0 // 合计
      },
      downLoadRul: "",
      arrListDown: {
        bankList: []
      },
      datePickerDefault: new Date(), // 当前时间
    };
  },

  watch: {},

  computed: {
    actionArr() {
      let arr = this.$store.state.user.actionAccess.map(item => {
        return item.code;
      });
      return arr;
    },
    // 导出
    hasExport() {
      return this.actionArr.indexOf("handleExport") > -1;
    },
    // 查询
    hasFind() {
      return this.actionArr.indexOf("Find") > -1;
    }
  },

  
  mounted() {
    this.companyId = this.$route.query.companyId
    this.companyName = this.$route.query.companyName
    this.feeDate = this.$route.query.feeDate
    this.query()
  },

  methods: {
    // 搜索
    searchFn() {
      this.tableComone.pageIndex = 1;
      this.query();
    },

    /**
     * 分页页码变动
     * @param {Number} val pageIndex
     */
    onChangePage(val) {
      this.tableComone.pageIndex = val;
      this.query();
    },
    /**
     * 分页页码变动
     * @param {Number} val pageSize
     */
    onpageSizeChange(val) {
      this.tableComone.pageIndex = 1;
      this.tableComone.pageSize = val;
      this.query();
    },
    /**
     * 分页查询接口
     * @param {Object} obj {pageIndex, pageSize}
     */
    async query() {
      var params = {
        HasPaging: true,
        CompanyID: this.companyId,
        CompanyName: this.companyName,
        FeeDate: this.feeDate,
        PageIndex: this.tableComone.pageIndex,
        PageSize: this.tableComone.pageSize
      };
      let res = await SalaryPayableBillApi.getDetailList(
        params
      );
      console.log("应付res: ", res);
      if (res.status === 200 && res.data.success) {
        this.tableData = res.data.data;
        this.tableComone.totalRows = res.data.totalRows;
        this.tableComone.total = res.data.total;
      } else {
        this.tableData = [];
      }
      this.loading = false;
    },

    // 表格选择操作
    handleOnSelectChange(value) {
      this.selectedEmployeeArr = value.map(item => {
        return { id: item.id, name: item.name };
      });
      this.selectedEmployeeId = value.map(item => {
        return item.id;
      });
      console.log("列表勾选数组1", this.selectedEmployeeArr);
      console.log("列表勾选数组2", this.selectedEmployeeId);
    },

    // 导出薪资应付账单
    async handleExport() {
      var params = {
        HasPaging: true,
        CompanyID: this.companyId,
        CompanyName: this.companyName,
        FeeDate: this.feeDate,
        PageIndex: '',
        PageSize: ''
      };
      console.log("params: ", params);
      let res = await SalaryPayableBillApi.exportDetail(
        params
      );
      console.log("导出薪资应付账单res: ", res);
      if (res.status === 200 && res.data.success) {
        console.log("返回链接: ", res.data.message);
        window.open(baseUrl + res.data.message, "_blank");
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        });
      }
    }
  } // methods end
}
</script>

<style lang="less" scoped>
</style>
